<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe624;</div>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe632;</span> 输入城市/景点/游玩主题
    </div>
    <router-link to="/city" tag="span">
      <div class="header-right">
        <span class="city">{{ this.currentCity }}</span>
        <span class="iconfont arrowdown-icon">&#xe64a;</span>
      </div>
    </router-link>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: "HomeHeader",
  computed:{
    ...mapState({
      currentCity:'city'
    })
  }
};
</script>
 
 <style lang="stylus" scoped>
 @import '~styles/varibles.styl';

 .header {
   touch-action: none;
   line-height: 0.86rem;
   display: flex;
   background: $bgColor;
   color: #fff;

   .header-left {
     float: left;
     width: 0.64rem;

     .back-icon {
       text-align: center;
       font-size: 0.4rem;
     }
   }

   .header-right {
     float: right;
     min-width: 1.24rem;
     padding 0 .1rem
     text-align: center;
     .arrowdown-icon {
       font-size: 0.24rem;
     }
   }

   .header-input {
     flex: 1;
     height: 0.64rem;
     background: #fff;
     margin: 0.12rem 0 0 0.2rem;
     color: #ccc;
     line-height: 0.64rem;
     padding-left: 0.2rem;
   }
 }
</style>
 